function buildDataContent (postId, story, contents, postedTime) {
	
	var data = '<div class = "item">'
	+ '<a href="#" class= "deletebox">X</a>'
	+ '<div class="item_user">' + story +'</div>'
	+ '<div>' + contents + '</div>'
	+ '<div class="time"><div style="padding-top:2px; float:left"> Gio dang: ' + postedTime + '</div>'
	+ '<div id="' + postId + '" class="likebutton"></div>'
	//+ '<div class="likebutton"></div>'
	+ '</div>'
	+ '</div>';
		
	return data;
}
function buildDataCommentType (postId, contents, postedTime) {
	//var data = '<div class = "item">'
	var data = '<div class = "item" id="item_' + postId + '">'
		+ '<div class="item_user"><a href="#" class= "deletebox"/></div>'
		+ '<div class="item_content" id= "CommentType_' + postId + '">' + contents + '</div>'
		+ '<div class="time"><div style="padding-top:2px; float:left"> Gio dang: ' + postedTime + '</div>'
		+ '<div id="' + postId + '" class="likebutton"></div>'
		+ '</div>'
		+ '</div>';
			
		return data;
}

function buildDataPictureType (postId, contents, pic, postedTime) {
	//var data = '<div class = "item">'
	var data = '<div class = "item" id="item_' + postId + '">'
		+ '<div class="item_user"><a href="#" class= "deletebox"/></div>'
		+ '<div class="item_content" id= "PictureType_' + postId + '">' + contents + '</div>'
		+ '<div class="item_picture">'
		+ '<img class="lazy" alt="Lazy Image" src="resources/images/url-loader.gif" data-src="' + pic + '"/>'
		+ '</div>'
		+ '<div class="time">'
		+ 	'<div style="padding-top:2px; float:left"> Gio dang: ' + postedTime + '</div>'
		+ 	'<div id="' + postId + '" class="likebutton"></div>'
		+ '</div>'
		+ '</div>';	
		return data;
}

function buildDataVideoType (postId, contents, pic, embedUrl, postedTime) {
	//var data = '<div class = "item">'
	var data = '<div class = "item" id="item_' + postId + '">'
		+ '<div class="item_user"><a href="#" class= "deletebox"/></div>'
		+ '<div class="item_content" id="VideoType_' + postId + '">' + contents
		+ '</div>'
		+ '<div class="item_video" id="itemVideo_' + postId + '">'
		+ 	'<div class="lazyload-thumbnail">'		
		+ 		'<img class="lazy video-thumbnail" alt="Lazy Image" data-src="' + pic + '" src="resources/images/url-loader.gif"/>'
		+ 		'<span></span>'
		+ 	'</div>'
		+ 	'<!--'
		+  		'<div class="item_video" >'
		+			'<iframe class="video_player" src="//' + embedUrl + '" frameborder="0" allowfullscreen></iframe>'
		+		'</div>'
		+ 	'-->'
		+ '</div>'
		+ '<div class="time"><div style="padding-top:2px; float:left"> Gio dang: ' + postedTime + '</div>'
		+ '<div id="' + postId + '" class="likebutton"></div>'
		+ '</div>'
		+ '</div>';
			
		return data;
}

/*function load(img)
{
  img.fadeOut(0, function() {
    img.fadeIn(1000);
  });
}*/

function loadData (data) {
	var out = [];
	jQuery.each(data, function(key, value){
		var story = value.story;
		var contents = value.contents;
		var pic = value.pic;
		var postedTime = value.postedTime;
		var postId = value.postId;
		var type = value.type;
		var embedUrl = value.embedUrl;
		
		//TODO: will get url from commentvl...
		var url = value.url;
		if (url == "") {
			url = "http://jquery.com";
		}		
		
		var dataString =  "";
		//alert ('type: ' + type);
		if (type == "comment") {
			dataString = buildDataCommentType(postId, contents, postedTime);			
			jQuery('<div>',{html: dataString}).appendTo('#result');			
			jQuery('#CommentType_' + postId).readmore({
				  speed: 75,
				  maxHeight: 72,
				  sectionCSS: 'display: block; width: 390px;',
				  moreLink: '<a href="' + url + '" target="_blank" class="moreLink">Read More</a>',
				  lessLink: '<a href="#" class="lessLink">Close</a>',
				  newWindow: true,
				  afterToggle : function(){				  
					  jQuery('#container').masonry( 'reload' );
					  Arrow_Points();
				  }
			});
		}
		else if (type == "picture") {
			//pic ='http://jquery.eisbehr.de/lazy/examples/images/1.jpg?t=1418894922';
			
			dataString = buildDataPictureType(postId, contents, pic, postedTime);			
			jQuery('<div>',{html: dataString}).appendTo('#result');
			
			jQuery('#PictureType_' + postId).readmore({
				  speed: 75,
				  maxHeight: 72,
				  sectionCSS: 'display: block; width: 390px;',
				  moreLink: '<a href="' + url + '" target="_blank" class="moreLink">Read More</a>',
				  lessLink: '<a href="#" class="lessLink">Close</a>',
				  newWindow: true,
				  afterToggle : function(){				  
					  jQuery('#container').masonry( 'reload' );
					  Arrow_Points();
				  }
			});			
			jQuery(".lazy").lazy({
		 		 afterLoad: function(element) {  
		 	    },
		 	    delay: 2000,
		 	    bind: "event"
		 	});
		}
		else if (type == "video") {
			dataString = buildDataVideoType(postId, contents, pic, embedUrl, postedTime);			
			jQuery('<div>',{html: dataString}).appendTo('#result');
			
			jQuery('#VideoType_' + postId).readmore({
				  speed: 75,
				  maxHeight: 72,
				  sectionCSS: 'display: block; width: 390px;',
				  moreLink: '<a href="' + url + '" target="_blank" class="moreLink">Read More</a>',
				  lessLink: '<a href="#" class="lessLink">Close</a>',
				  newWindow: true,
				  afterToggle : function(){				  
					  jQuery('#container').masonry( 'reload' );
					  Arrow_Points();
				  }
			});
			
			jQuery(".lazy").lazy({
		 		 afterLoad: function(element) { 
		 			 //add class play
		 			jQuery( "div.lazyload-thumbnail" ).find("span").addClass("play");	
		 	    },
		 	    delay: 2000,
		 	    bind: "event"
		 	});
			
			//jQuery('.lazyload-thumbnail').lazyload({load: load});
			jQuery("#itemVideo_" + postId).lazyload({
				trigger: 'click',
				/*load: function(element) {
					//alert ('loading...')
				}*/
			});
		}
		else {
			dataString = buildDataContent(postId, story, contents, postedTime);		
			jQuery('<div>',{html: dataString}).appendTo('#result');
		}					
		//out.push (buildDataContent(postId, story, contents, postedTime));		
								
		jQuery('#' + postId).facebook("likebutton", {
	        url : url,
	        action : "like",
	        layout : "button",
	        css_class : "likebutton_border",
	        width : "10"
	    });
		
	});	
}

function addNewPost (data) {
	var out = [];
	var hasNewData = false;
	jQuery.each(data, function(key, value){
		var postId = value.postId;
		if(jQuery.inArray(postId, arrPostId) == -1){
			arrPostId.push(postId);
			var story = value.story;
			var contents = value.contents;
			var pic = value.pic;
			var postedTime = value.postedTime;
			var postId = value.postId;
			var type = value.type;
			var embedUrl = value.embedUrl;
			
			//TODO: will get url from commentvl...
			var url = value.url;
			if (url == "") {
				url = "http://jquery.com";
			}
			
			if (type == "comment") {
				dataString = buildDataCommentType(postId, contents, postedTime);			
				jQuery('<div>',{html: dataString}).prependTo('#result');			
				jQuery('#CommentType_' + postId).readmore({
					  speed: 75,
					  maxHeight: 72,
					  sectionCSS: 'display: block; width: 390px;',
					  moreLink: '<a href="' + url + '" target="_blank" class="moreLink">Read More</a>',
					  lessLink: '<a href="#" class="lessLink">Close</a>',
					  newWindow: true,
					  afterToggle : function(){
						  jQuery('#container').masonry( 'reload' );
						  Arrow_Points();
					  }
				});
			}
			else if (type == "picture") {
				dataString = buildDataPictureType(postId, contents, pic, postedTime);			
				jQuery('<div>',{html: dataString}).prependTo('#result');
				
				jQuery('#PictureType_' + postId).readmore({
					  speed: 75,
					  maxHeight: 72,
					  sectionCSS: 'display: block; width: 390px;',
					  moreLink: '<a href="' + url + '" target="_blank" class="moreLink">Read More</a>',
					  lessLink: '<a href="#" class="lessLink">Close</a>',
					  newWindow: true,
					  afterToggle : function(){				  
						  jQuery('#container').masonry( 'reload' );
						  Arrow_Points();
					  }
				});
			}
			else if (type == "video") {
				dataString = buildDataVideoType(postId, contents, pic, embedUrl, postedTime);			
				jQuery('<div>',{html: dataString}).appendTo('#result');
				
				jQuery('#VideoType_' + postId).readmore({
					  speed: 75,
					  maxHeight: 72,
					  sectionCSS: 'display: block; width: 390px;',
					  moreLink: '<a href="' + url + '" target="_blank" class="moreLink">Read More</a>',
					  lessLink: '<a href="#" class="lessLink">Close</a>',
					  newWindow: true,
					  afterToggle : function(){				  
						  jQuery('#container').masonry( 'reload' );
						  Arrow_Points();
					  }
				});
				
				jQuery(".lazy").lazy({
			 		 afterLoad: function(element) { 
			 			 //add class play
			 			jQuery( "div.lazyload-thumbnail" ).find("span").addClass("play");	
			 	    },
			 	    delay: 2000,
			 	    bind: "event"
			 	});
				//jQuery('.lazyload-thumbnail').lazyload({load: load});
				jQuery("#itemVideo_" + postId).lazyload({
					trigger: 'click',
					/*load: function(element) {
						//alert ('loading...')
					}*/
				});
			}
			else {
				var dataString = buildDataContent(postId, story, contents, postedTime);
				jQuery('<div>',{html: dataString}).prependTo('#result');
			}
						
			//out.push (buildDataContent(postId, story, contents, postedTime));						
			jQuery('#' + postId).facebook("likebutton", {
		        url : url,
		        action : "like",
		        layout : "button",
		        css_class : "likebutton_border",
		        width : "10"
		    });
			
			hasNewData = true;
		}		
	});	
	return hasNewData;
	
}

function getDataPostComment() {
	var output = jQuery('.liveurl');
	
	var story = jQuery.trim(output.find('.title').text());
	var contents = jQuery.trim(jQuery('#commentvl').val()); 
	var source = jQuery.trim(output.find('.description').text());
	var url = jQuery.trim(output.find('.url').text());
	var pic = "";
	//var embedUrl = urlData.video.embedurl;
	var embedUrl = "";
	if (urlData != null && urlData.video != null) {
		embedUrl = urlData.video.embedurl;
	}
	
	if (curImages != null && curImages.length > 0) {	
		var images = output.find('.image');
		var image = images.find('.active');
		pic = image.attr('src'); 
	}
	//alert ('type : ' + type);
	
	var post = {			
			"story" : story,
			"contents" : contents,
			"source" : source,
			"pic" : pic, 
			"youtubeKey" : 'youtubeKey',
			"url" : url,
			"embedUrl" :  embedUrl,
			"type" : type
		};
	var jsonString = JSON.stringify(post);
	return jsonString;
	
}